<!-- 回款列表-回款详情  -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="returned-detail">
      <h3>基本信息</h3>
      <div class="base">
        <a-form :model="form" :rules="rules" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="orderCode" label="订单编号：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.number"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="contractCode" label="合同编号：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.contractNumber"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="clientName" label="供应商名称：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.supplierName"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="clientLevel" label="合同名称：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.contractName"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="contactName" label="联系人：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.customerName"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="phone" label="联系电话：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.customerPhone"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="bussinessManager" label="业务经理：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.salesmanName"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="contractMoney" label="订单总金额：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.totalPrice"
                  allow-clear
                >
                  <template #append> 人民币 </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="frontMoney" label="累计回款金额：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.accumulatedPayPrice"
                  allow-clear
                >
                  <template #append>
                    {{ form.accumulatedPayPriceUnit }}
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="frontMoney" label="未回款金额：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.waitPayPrice"
                  allow-clear
                >
                  <template #append>
                    <span>{{ form.waitPayPriceUnit }}</span>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="AccuReturnedMoney" label="已开票金额：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.invoicablePrice"
                  allow-clear
                >
                  <template #append> 人民币 </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="noReturnedMoney" label="可开票金额：">
                <a-input
                  disabled
                  size="large"
                  v-model="form.invoicedPrice"
                  allow-clear
                >
                  <template #append> 人民币 </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-tabs
        default-active-key="1"
        type="card-gutter"
        v-model:active-key="tabsKey"
        lazy-load
      >
        <a-tab-pane key="1" title="付款列表">
          <returnedRecord
            v-if="tabsKey === '1' && payData"
            :clientId="clientId"
            :titleData="payData"
          />
        </a-tab-pane>
        <a-tab-pane key="2" title="发票列表">
          <Invoicerecord
            v-if="tabsKey === '2'"
            :clientId="clientId"
            :titleData="InvoiceData"
          />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    watchEffect,
    defineAsyncComponent,
    onMounted,
    provide,
    nextTick,
  } from 'vue';
  import { useRoute } from 'vue-router';
  import { getSinglePurchaseOrder } from '@/api/buy-management/buy-order/index';
  import { GetClientDetailTabs } from '@/api/order-management/client-management/client-list/index';
  import miiter from '@/utils/mitt';
  import returnedRecord from './components/pay-record-table/index.vue';
  import Invoicerecord from './components/Invoice-record-table/index.vue';

  const isRouterAlive = ref(true);
  const reload = () => {
    isRouterAlive.value = false;
    nextTick(() => {
      isRouterAlive.value = true;
    });
  };
  provide('reload', reload);

  // import addReturned from '../components/returned-money-enter/index.vue';
  const tabsKey = ref('1');
  const route = useRoute();
  const title = '回款详情';
  const breadCrumb = ['订单管理', '回款管理', '回款列表', '回款详情'];
  const isReturnedVisible = ref(false);
  const isInvoiceVisible = ref(false);
  // const record = Number(route.query.record);
  let form = ref<any>({});
  const getOrderId = ref();
  const payData = ref([]); //存储回款记录数据
  const InvoiceData = ref([]); //存储发票记录数据
  const clientId = ref(); //存储客户id

  const data = ref([
    {
      key: '1',
      title: '回款记录',
    },
    {
      key: '2',
      title: '发票记录',
    },
  ]);

  let modalVisible = ref(false); // 判断是否显示新增回款弹框
  const add = () => {
    modalVisible.value = true;
  };

  const getData = async () => {
    const res = await getSinglePurchaseOrder({ id: Number(route.query.id) });
    form.value = res;
    payData.value = res.pay;
    InvoiceData.value = res.record;
    clientId.value = res.clientCompanyId;
    provide('sendInfo', form.value);
    console.log(2, payData.value);
  };

  getData();
</script>

<style scoped lang="less">
  .returned-detail {
    padding: 10px 40px;
    .base {
      margin-top: 20px;
      padding: 0 30px;
    }
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-input[disabled]) {
    -webkit-text-fill-color: black;
  }
</style>
